/**
 * Created by Delicate on 2018/1/3.
 */
import React from 'react';
import {
    StyleSheet,
    View,
    Text,
    FlatList,
    ActivityIndicator
} from 'react-native';

import NavBar from '../../components/NavBarView'
import DashLine from '../../components/DashLine'
import NoData from '../../components/ListHasNoDataView'
import LoadedAll from '../../components/ListLoadedAllView'
import SystemService from '../../services/System'
import HorizontalMenu from '../../components/HorizontalMenuView'


let _self;

class Views extends React.Component {

    constructor(props) {
        super(props)
        _self = this;
        this.state = {
            list: [],
            pageNumber: 1,
            pageSize: 10,
            refreshing: false,
            pulling: false,
            lastPage: false
        };
        this._loadLock = false;
    }

    componentWillMount() {

    }

    componentDidMount() {
        _self.refresh();
    }

    async load(pageNumber) {
        const {result, message, data} = await SystemService.systemMessage({
            params: {
                pageNumber,
                pageSize: _self.state.pageSize
            }
        })
        if(result){
            _self.setState({
                list: data.list
            });
        }else {
            Toast.show(message);
        }
    }

    async refresh() {
        if (!_self._loadLock && !_self.state.refreshing) {
            _self._loadLock = true;
            _self.setState({
                refreshing: true
            });
            const {result, message, data} = await SystemService.systemMessage({
                params: {
                    pageNumber: 1,
                    pageSize: _self.state.pageSize
                }
            });
            // DeviceEventEmitter.emit(Constants.LISTENER_MESSAGES);
            if (result) {
                const page = data.page;
                _self.setState({
                    list: page.list,
                    pageNumber: 1,
                    lastPage: page.lastPage,
                });
            } else {
                Toast.show(message);
            }
            setTimeout(()=>{
                _self._loadLock = false;
                _self.setState({
                    refreshing: false
                });
            },layout.REFRESH_DELAY_TIME);
        }
    }

    async pull(pageNumber) {
        if (!_self._loadLock && !_self.state.pulling && !_self.state.lastPage && pageNumber && pageNumber !== this.state.pageNumber) {
            _self._loadLock = true;
            _self.setState({
                pulling: true
            });
            const {result, message, data} = await SystemService.systemMessage({
                params: {
                    pageSize: _self.state.pageSize,
                    pageNumber
                }
            });
            if (result) {
                const page = data.page;
                _self.setState({
                    list: [
                        ..._self.state.list,
                        ...page.list
                    ],
                    pageNumber: page.pageNumber,
                    lastPage: page.lastPage
                });
            } else {
                Toast.show(message);
            }
            setTimeout(()=>{
                _self._loadLock = false;
                _self.setState({
                    pulling: false
                });
            },800)
        }
    }

    render() {
        return (
            <View style={base.baseOuter}>
                <NavBar host={this} title="系统消息"/>
                <FlatList
                    onRefresh={()=>this.refresh()}
                    refreshing={this.state.refreshing}
                    onEndReached={() => this.pull(this.state.pageNumber + 1)}
                    onEndReachedThreshold={0.5}
                    data={this.state.list}
                    keyExtractor={(item, index) => index}
                    renderItem={({item}) => {
                        return (
                            <View style={[base.columnCC, styles.box]}>
                                <View style={[base.rowCC, styles.dateBox]}>
                                    <Text allowFontScaling={false} style={styles.date}>{item.create_date}</Text>
                                </View>
                                <View style={styles.cardBox}>
                                    <View style={[base.columnCC, styles.innerBox]}>
                                        <DashLine dashWidth={layout.width(6)} style={styles.contentLine}/>
                                        <View style={[styles.angle, styles.angleLeft, styles.angleBottom]}/>
                                        <View style={[styles.angle, styles.angleRight, styles.angleBottom]}/>
                                        <View style={[styles.contentBox]}>
                                            <Text allowFontScaling={false} style={styles.title}>{SystemService.SYSTEM_MESSAGE_TYPE[item.content_type]}</Text>
                                        </View>
                                    </View>
                                    <View style={[base.columnCC, styles.innerBox]}>
                                        <View style={[styles.angle, styles.angleLeft, styles.angleTop]}/>
                                        <View style={[styles.angle, styles.angleRight, styles.angleTop]}/>
                                        <View style={[styles.contentBox]}>
                                            <Text allowFontScaling={false} style={styles.content}>{item.content_text}</Text>
                                            <HorizontalMenu
                                                textStyle={styles.menuText}
                                                style={styles.menu}
                                                onPress={()=>{}}
                                                last={true}
                                                text="查看详情"/>
                                        </View>
                                    </View>
                                </View>
                            </View>
                        )
                    }}
                    ListHeaderComponent={() => {
                        if (this.state.list.length === 0) {
                            return (
                                <View>
                                    <NoData/>
                                </View>
                            )
                        } else {
                            return (<View/>)
                        }
                    }}
                    ListFooterComponent={() => {
                        if (this.state.lastPage && this.state.list.length > 0) {
                            return (
                                <LoadedAll/>
                            )
                        } else {
                            return (
                                <View>
                                    <ActivityIndicator animating={this.state.pulling}/>
                                </View>
                            )
                        }
                    }}
                />
            </View>
        )
    }
}

const styles = StyleSheet.create({
    dateBox: {
        marginTop: layout.GAP_VERTICAL_LARGE,
        paddingHorizontal: layout.GAP_HORIZONTAL_LARGE,
        paddingVertical: layout.GAP_VERTICAL_SMALL,
        borderRadius: layout.width(16),
        backgroundColor: layout.MAIN_BORDER_COLOR
    },
    date: {
        fontSize: layout.font(24),
        color: layout.FORM_FONT_COLOR
    },
    cardBox: {
        alignSelf: 'stretch',
        marginHorizontal: layout.GAP_HORIZONTAL_MID,
        backgroundColor: '#fff'
    },
    innerBox: {
        justifyContent: 'flex-start',
        alignSelf: 'stretch',
        paddingHorizontal: layout.GAP_HORIZONTAL_LARGE,
        overflow: 'hidden'
    },
    contentBox: {
        alignSelf: 'stretch',
        paddingTop: layout.GAP_VERTICAL_MID
    },
    title: {
        paddingHorizontal: layout.GAP_HORIZONTAL_LARGE,
        paddingBottom: layout.GAP_VERTICAL_MID,
        fontSize: layout.font(30),
        lineHeight: layout.heightToFixed(40),
        color: layout.MAIN_AUX_COLOR,
        textAlign: 'center'
    },
    content: {
        alignSelf: 'stretch',
        paddingHorizontal: layout.GAP_HORIZONTAL_LARGE,
        paddingVertical: layout.GAP_VERTICAL_MID,
        fontSize: layout.font(24),
        lineHeight: layout.heightToFixed(28),
        color: layout.MAIN_AUX_COLOR,
        textAlign: 'left'
    },
    contentLine: {
        position: 'absolute',
        bottom: 0,
        width: layout.MAX_WIDTH - (layout.GAP_HORIZONTAL_LARGE + layout.GAP_HORIZONTAL_MID) * 2,
        height: layout.LINE_WIDTH * 2,
    },
    menu: {
        borderTopWidth: layout.LINE_WIDTH,
        borderTopColor: layout.MAIN_BORDER_COLOR_C1
    },
    menuText: {
        fontSize: layout.font(28),
        color: layout.MAIN_COLOR
    },
    angle: {
        position: 'absolute',
        width: layout.width(32),
        height: layout.height(32),
        borderRadius: layout.width(16),
        backgroundColor: layout.MAIN_BACKGROUND_COLOR
    },
    angleLeft: {
        left: -layout.width(16),
    },
    angleBottom: {
        bottom: -layout.height(16),
    },
    angleRight: {
        right: -layout.width(16),
    },
    angleTop: {
        top: -layout.height(16),
    },
})

//路由
const Message = {
    screen: Views,
    navigationOptions: {
        header: null,
    },
    name: 'Message',
    sign: true
};

export default Message;